<template>
  <div class="contain-report">
    <div class="report-title">实验指导资源查看</div>
    <div class="report-search">
      <div></div>

      <el-select placeholder="请选择案例类别" @change="getGuidelinesList" clearable @close="form.guideClassId = null"
                 v-model="form.guideClassId"  style="width: 300px;margin-right: 20px;">
        <el-option
            v-for="item in cateGoryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        >
        </el-option>
      </el-select>
      <el-input style="width: 300px"
                placeholder="请输入"
                v-model="form.name"
                clearable
                @clear="getGuidelinesList"
      >
        <i slot="suffix" class="el-input__icon el-icon-search" style="font-size: 20px;cursor: pointer"
           @click="getGuidelinesList"></i>
      </el-input>
    </div>

    <div class="report-table">
      <div class="table-header">
        <div class="table-box">资源名称</div>
        <div class="table-box">实验室</div>
        <div class="table-box">实验室指导类别名称</div>
        <div class="table-box">上传时间</div>
        <div class="table-box">操作</div>
      </div>
      <div class="tab-body">
        <div class="table-list" v-for="item in tableData" :key="item.id">
          <div class="list-show">{{ item.name }}</div>
          <div class="list-show">{{ item.laboratoryName }}</div>
          <div class="list-show">{{ item.guideClassName }}</div>
          <div class="list-show">{{ item.createTime }}</div>
          <div class="list-show">
            <el-button type="text" @click="openSee(item)">查看</el-button>
            <el-button type="text" @click="downloadFile(item.resourceUrl)">下载</el-button>
          </div>
        </div>
      </div>
    </div>

    <div class="report-page">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[5]"
          :page-size="5"
          layout="sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <el-dialog
        :show-close="false"
        :visible.sync="seeDialog"
        width="40%"
    >
      <div class="dialog-box">
        <div class="box-top">查看实验指导</div>
        <div class="box-body">
          <el-form label-width="80px">
            <el-form-item label="指导名称:">
              <el-input placeholder="请输入资源名称" disabled v-model="seeForm.name"></el-input>
            </el-form-item>
            <el-form-item label="指导内容:">
              <el-input type="textarea" v-model="seeForm.message" disabled placeholder="请输入资源内容(可选)"
                        :rows="2"></el-input>
            </el-form-item>
            <el-form-item label="实验室:">
              <el-input placeholder="请输入实验室" disabled v-model="seeForm.laboratoryName"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="text" @click="openUrl(seeForm.resourceUrl,seeForm.id)">查看指导文件</el-button>
            </el-form-item>
          </el-form>
          <div class="form-btn">
            <el-button size="small" @click="seeDialog = false">关 闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-drawer
        size='50%'
        close-on-press-escape
        :visible.sync="dialog"
        :with-header="false">
      <div class="docWrap" v-if="showFile === 0">
        <!-- 预览文件的地方（用于渲染） -->
        <div ref="file"></div>
      </div>
      <iframe :src="fileUrl" v-if="showFile === 1" style="width: 100%;height: 100%"></iframe>
    </el-drawer>
  </div>
</template>

<script>
import {guidelinesList} from "../../api/guidelines";
import request from "../../utils/request";
import {getGuideClassFindList, getRecipeClassFindList} from "@/api/laboratory";

let docx = require("docx-preview");
export default {
  name: "guidanceResources",
  data() {
    return {
      cateGoryList:null,
      showFile: null,
      form: {
        guideClassId:null,
        name: "",
        pageIndex: 1,
        pageSize: 5
      },
      tableData: [],
      total: null,
      seeForm: {},
      seeDialog: false,
      dialog: false,
      fileUrl: null,
      laboratoryList: [],
    }
  },
  mounted() {
    this.getGuidelinesList()
    this.getcateGoryList()
  },
  methods: {
    async getGuidelinesList() {
      const {data} = await guidelinesList(this.form)
      if (data.code === 200) {
        this.tableData = data.data.data
        this.total = data.data.total
      }
    },
    //查询案例类别
    async getcateGoryList() {
      const {data} = await getGuideClassFindList()
      console.log(data)
      if (data.code === 200) {
        this.cateGoryList = data.data
      }
    },
    handleSizeChange(val) {
      this.form.pageSize = val
      this.getGuidelinesList()
    },
    handleCurrentChange(val) {
      this.form.pageIndex = val
      this.getGuidelinesList()
    },
    downloadFile(url) {
      this.$confirm('下载该实验指导书, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.open(url, '_blank')
      })
    },
    openSee(item) {
      console.log(item)
      this.seeForm = item
      this.seeDialog = true
    },
    openUrl(url, id) {
      this.seeDialog = false
      let parts = url.split(".");
      let extension = parts[parts.length - 1];
      console.log(extension)
      if (extension === 'docx' || extension === 'DOCX') {
        this.dialog = true
        this.showFile = 0
        request({
          url: "/upload/getBook/" + id,
          method: 'get',
          responseType: 'blob',
        }).then(resp => {
          docx.renderAsync(resp.data, this.$refs.file); // 渲染到页面
        })
      } else if (extension === 'doc' || extension === 'DOC') {
        this.downLoad(url)
      } else {
        this.dialog = true
        this.showFile = 1
        this.fileUrl = url
      }

    },
    downLoad(url) {
      this.$confirm('下载该模板, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.open(url, '_self')
      }).catch(() => {
        this.$message.warning('已取消下载')
      });
    },
    //     openUrl(url){
    //         this.seeDialog = false
    //         this.fileUrl = url
    //  let val = this.fileUrl.split('.')
    //        let suffix = val[val.length - 1];
    //         console.log(suffix)
    // if (suffix === 'docx'){
    //             const a = document.createElement('a');
    //             a.style.display = 'none';
    //             a.href = this.fileUrl;
    //             document.body.appendChild(a);
    //             a.click();
    //             document.body.removeChild(a);
    // }else {
    //             this.dialog = true
    // }
    //     }
  },
}
</script>

<style scoped lang="less">
.contain-report {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  .report-title {
    font-size: 22px;
    color: #333;
  }

  .dialog-box {
    width: 100%;
    min-height: 50vh;
    border-radius: 5px;
    overflow: hidden;

    .box-top {
      width: 100%;
      height: 10vh;
      background-image: linear-gradient(to left, #3591d4 0%, #50b3da 50%, #85f9e6 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      color: #fff;
    }

    .box-body {
      width: 100%;
      height: 80%;
      padding: 5% 10%;
      box-sizing: border-box;
      background-color: #ffffff;

      /deep/ .el-input__inner {
        border: none;
        background-color: #ecedef;
      }

      /deep/ .el-textarea__inner {
        border: none;
        background-color: #ecedef;
      }

      .form-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .file-list {
        margin-top: 20px;
        width: 100%;

        .file-box {
          margin-top: 10px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .left {
            width: 40%;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
      }
    }
  }

  .report-search {
    width: 100%;
    margin: 30px 0;
    padding: 0 5%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;


    /deep/ .el-input__inner {
      border-radius: 20px;
    }
  }

  .report-table {
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;

    .table-header {
      width: 100%;
      height: 40px;
      background-color: #7fd1e5;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .table-box {
        width: 20%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 500;
        color: #333333;
      }
    }

    .tab-body {
      width: 100%;
      background-color: #ffffff;
      padding: 20px 0;
      box-sizing: border-box;
      border-radius: 20px;

      .table-list {
        margin: 10px 0;
        width: 100%;
        padding-bottom: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .list-show {
          width: 20%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          color: #666;
        }
      }
    }
  }

  .report-page {
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
